<section class="container" ng-init="$ctrl.init()">
    <div ng-repeat="msg in $ctrl.messages.items">
        <ul>
            <li class="row">
                <div class="col-sm-12">
                    <img ng-if="msg.connection" ng-src="{{msg.connection.avatar}}" alt="">
                </div>

                <div class="col-sm-12" ng-repeat="field in $ctrl.fields | orderBy:'priority' track by $index">
                    <mix-field-preview model="msg.data[field.name]" field="field"></mix-field-preview>
                </div>

            </li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div ng-show="!$ctrl.user.loggedIn">
                <a class="btn btn-info" ng-click="$ctrl.login()">Login</a>
            </div>
            <form ng-show="$ctrl.user.loggedIn" ng-class="{'submitted': submitted}" ng-if="$ctrl.attrData"
                ng-submit="$ctrl.submit()">
                <div class="card">
                    <div id="attributeSetId_{{$ctrl.attrData.attributeSetId}}" class="card-body show">
                        <div class="row">
                            <div class="col-md-12"><input type="checkbox" ng-model="$ctrl.request.isSave">Save Data</div>
                            <div class="col-sm-12">
                                <div ng-repeat="field in $ctrl.fields | orderBy:'priority' track by $index">
                                    <mix-field-editor model="$ctrl.attrData" field="field"></mix-field-editor>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <p ng-repeat="err in $ctrl.errors" class="text-danger" ng-bind="err"></p>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="button" ng-click="$ctrl.submit()"
                            class="btn btn-sm btn-primary btn-round float-right px-4" ng-disabled="$ctrl.isBusy">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"
                                ng-show="$ctrl.isBusy"></span>
                            <em class="fas fa-save" ng-if="!$ctrl.isBusy"></em> Submit</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4">
            <ul>
                <li ng-repeat="m in $ctrl.members">
                    <img alt="{{m.name}}" ng-src="{{m.avatar}}" /> <span ng-bind="m.name"></span>
                </li>
            </ul>
        </div>
    </div>
</section>
<!-- /.content -->